<template>
  <div id="app">
    <!--
    使用router-link组件来导航
    router-link默认会被渲染成为一个带有href的a标签
    -->
    <nav>
      <router-link to="/home">首页</router-link>
      <br/>
      <router-link to="/about">关于</router-link>
      <br/>
      <router-link :to="'/user/'+userName">用户</router-link>
      <br/>
      <router-link :to="{path:'/profile',query:my}">我的</router-link>
    </nav>

    <hr/>
      <!--
      路由出口：路由匹配到的组件,将被渲染在此位置
      相当于router-view标签相当于占位符的作用，其位置可以任意。
      -->
    <!--Vue3和Router4语法-->
    <router-view v-slot="{Component}">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive"/>
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive"/>
    </router-view>



  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      userName:"雨安少爷",
      my:{
        name:"雨安",
        age:18,
        sex:"男"
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #ffc1ba;
}

nav a.router-link-exact-active {
  color: #00fff7;
}
</style>
